import React, {Component} from 'react';
import { Route, Redirect, Switch } from 'react-router-dom';
import DocumentTitle from 'react-document-title';
import components from '../components';
import routesConfig from './config';
import queryString from 'query-string'

export default class c extends Component{
    // 权限验证
    requireAuth = (permission, component) => {
        const { auth } = this.props;
        const { permissions } = auth.data;
        if(!permission || !permission.includes(permission)) return <Redirect to={'404'} />;
        return component;
    }
    // 登录检查
    requireLogin = (component, permission) => {
        const { auth } = this.props;
        const { permissions } = auth.data;
        if(!permissions){
            return <Redirect to={'/login'} />
        }
        return permission?this.requireAuth(permission, component) : component;
    }
    render(){
        return (
            <Switch>
                {
                    // 遍历最外层
                    Object.keys(routesConfig).map(key => {
                        // 遍历里层路由
                        routesConfig[key].map(r => {
                            const route = r => {
                                const component = components[r.component];
                                return (
                                    <Route 
                                        key={r.route || r.key}
                                        exact
                                        path={r.route || r.key}
                                        render={
                                            props => {
                                                const reg = /\?\s*/g;
                                                // 匹配？及其以后字符串
                                                const queryParams  = window.location.hash.match(reg);
                                                // 去除？的参数
                                                const { params } = props.match;
                                                Object.keys(params).forEach(key => {
                                                    params[key] = params[key] && params[key].replace(reg, '');
                                                })
                                               props.match.params = {...params};
                                               const merge = {...props, query: queryParams? queryString.params(queryParams[0]):{}} 
                                               const wrappedComponent = (
                                                   <DocumentTitle title={r.title}>
                                                       <Component {...merge} />
                                                   </DocumentTitle>
                                               )
                                               return r.login?wrappedComponent:this.requireLogin(wrappedComponent, r.auth);
                                            }
                                        }
                                    />
                                )
                            }
                            return r.component?route(r):r.children.map(r => route(r));
                        })
                    })
                }
            </Switch>
        )
    }
}